<template>
	<view class="">
		<view>上传图片 {{imageList.length}}/{{count}}</view>
		<view class="uni-list list-pd">
			<view class="uni-uploader__files" style="border: #0000CC 1px solid;height: 100px;">
				<block v-for="(image,index) in imageList" :key="index">
					<view class="uni-uploader__file">
						<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
					</view>
				</block>
				<view class="uni-uploader__input-box" style="border: #008200 1px solid;height:70px;">
					<view class="uni-uploader__input" @tap="chooseImage">上传选择</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				count: 3, //设置能上传的最大数量
			}
		},
		created() {
			var that = this;
			var author = that.$store.getters.getState.author;
			this.curLoginName = decodeURI(author.realName);
		},
		methods: {
			/* ---------------上传图片--------------- */
			chooseImage: async function() {
				const _self = this
				if (_self.imageList.length === _self.count) {
					let isContinue = await _self.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				/* 选中图片 */
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					count: _self.count,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths; //获取到本地图片地址
						/* 上传图片 */
						const uploadTask = uni.uploadFile({
							url: 'http://*********',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': token
							},
							formData: {
								'user': 'test',
							},
							success: function(res) {
								let toJsonRes = JSON.parse(res.data) //获取到后台处理过的地址
								let list = []
								list.push("http://*********" + toJsonRes.data)
								_self.imageList = _self.imageList.concat(list);
							}
						});
					}
				})
			},
			/* 图片数量满了弹出窗口询问是否清空 */
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有" + this.count + "张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
							} else {

							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			/* 预览图片 */
			previewImage: function(e) {
				let current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			/* 删除图片 */
			delImage(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(e.currentTarget.dataset.index, 1);
						}
					}
				})
			}

		}
	}

	window.setImagePreview = function() {
		var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
			picture = file_head.value;
		if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
			!1;
		if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style
			.display = "block",
			preview.style.width = "63px",
			preview.style.height = "63px",
			preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf(
				"Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(
				file_head.files[0]);
		else {
			file_head.select(),
				file_head.blur(),
				img_txt = document.selection.createRange().text,
				localImag = document.getElementById("localImag"),
				localImag.style.width = "63px",
				localImag.style.height = "63px";
			try {
				localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
					localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
			} catch (f) {
				return alert("您上传的图片格式不正确，请重新选择！"),
					!1
			}
			preview.style.display = "none",
				document.selection.empty()
		}
		return document.getElementById("DivUp").style.display = "block",
			!0
	}
</script>

<style>

</style>
